--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Commit 7478791a240aa50b82208315297bed92d53fbeeb
Parents : 0e0732a
Author : Ivan <ivan@quad4.io>
Signature : Signature validation error
Date : 2026-04-13T22:03:13-05:00
feat(toast): implement toast dismissal functionality and manage loading state in ConversationDropDownMenu
Changes
2 files changed, 22 insertions(+), 1 deletions(-)
Diff
diff --git a/meshchatx/src/frontend/components/Toast.vue b/meshchatx/src/frontend/components/Toast.vue
index d5c71929..4516375f 100644
--- a/meshchatx/src/frontend/components/Toast.vue
+++ b/meshchatx/src/frontend/components/Toast.vue
@@ -68,10 +68,21 @@ export default {
this.toastHandler = (toast) => {
this.add(toast);
};
+ this.dismissHandler = ({ key }) => {
+ if (key == null) {
+ return;
+ }
+ const index = this.toasts.findIndex((t) => t.key === key);
+ if (index !== -1) {
+ this.remove(this.toasts[index].id);
+ }
+ };
GlobalEmitter.on("toast", this.toastHandler);
+ GlobalEmitter.on("toast-dismiss", this.dismissHandler);
},
beforeUnmount() {
GlobalEmitter.off("toast", this.toastHandler);
+ GlobalEmitter.off("toast-dismiss", this.dismissHandler);
},
methods: {
add(toast) {
diff --git a/meshchatx/src/frontend/components/messages/ConversationDropDownMenu.vue b/meshchatx/src/frontend/components/messages/ConversationDropDownMenu.vue
index 4524b1ec..e82b14b3 100644
--- a/meshchatx/src/frontend/components/messages/ConversationDropDownMenu.vue
+++ b/meshchatx/src/frontend/components/messages/ConversationDropDownMenu.vue
@@ -139,6 +139,7 @@ import MaterialDesignIcon from "../MaterialDesignIcon.vue";
import DialogUtils from "../../js/DialogUtils";
import GlobalState from "../../js/GlobalState";
import GlobalEmitter from "../../js/GlobalEmitter";
+import ToastUtils from "../../js/ToastUtils";
export default {
name: "ConversationDropDownMenu",
@@ -177,6 +178,7 @@ export default {
return {
contact: null,
GlobalState,
+ pingInFlight: false,
};
},
computed: {
@@ -312,8 +314,13 @@ export default {
return;
}
+ if (this.pingInFlight) {
+ return;
+ }
+ this.pingInFlight = true;
+ const pingToastKey = "conversation-ping";
+ ToastUtils.loading(this.$t("messages.ping_in_progress"), 0, pingToastKey);
try {
- // ping destination
const response = await window.api.get(`/api/v1/ping/${destinationHash}/lxmf.delivery`, {
params: {
timeout: 30,
@@ -352,6 +359,9 @@ export default {
console.log(e);
const message = e.response?.data?.message ?? this.$t("messages.ping_failed");
DialogUtils.alert(message);
+ } finally {
+ ToastUtils.dismiss(pingToastKey);
+ this.pingInFlight = false;
}
},
},
──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────